<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>登录_资源共享平台</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <style type="text/css">
        .layui-container {
            max-width: 600px;
            margin-top: 50px;
        }
        .find-password {
            float: right;
            margin-right: 40px;
            color: blue;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <form class="layui-form" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" id="username" name="username" placeholder="请输入用户名" class="layui-input" lay-verify="required" lay-reqText="请输入用户名" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密&nbsp;&nbsp;码：</label>
            <div class="layui-input-block">
                <input type="password" id="password" name="password" placeholder="请输入密码" class="layui-input" lay-verify="required" lay-reqText="请输入密码" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录方式：</label>
            <div class="layui-input-block">
                <input type="radio" name="loginType" value="0" title="普通用户" checked="checked" />
                <input type="radio" name="loginType" value="1" title="管理员" />
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="checkbox" id="rememberMe" name="rememberMe" value="rememberMe" lay-skin="primary" title="记住密码" />
                <a href="javascript:parent.showFindPassword()" class="find-password">忘记密码</a>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="sbtn" class="layui-btn" lay-submit="" lay-filter="*">登录</button>
                &nbsp;&nbsp;<label id="errorInfo" style="color: red;"></label>
            </div>
        </div>
    </form>
</div>

<script src="/js/jquery-2.2.4.min.js"></script>
<script src="/js/jquery.cookie-1.4.1.min.js"></script>
<script src="/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['layer', 'form'], function () {
        let $ = layui.jquery,
            layer = layui.layer,
            form = layui.form;

        // 读取记住的用户和密码
        let user = $.cookie('user');
        if (user) {
            let usernameAndPassword = user.split("-");
            $("#username").val(usernameAndPassword[0])
            $("#password").val(usernameAndPassword[1])
        }
        let isRememberMe = $.cookie('isRememberMe');
        if (isRememberMe) {
            $("#rememberMe").prop("checked", true);
            form.render();//刷新表单
        }

        // 监听提交
        form.on('submit(*)', function (data) {
            $("#errorInfo").text("");

            let index = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });

            $("#sbtn").attr('disabled', true);

            $.post("/user/login", data.field, function (result) {
                layer.close(index);
                $("#sbtn").attr('disabled', false);
                if (result.success) {
                    // 管理员登录管理后台
                    if (result.loginType == 1) {
                        parent.location.href = "/admin";
                    } else {
                        parent.backLastPage();
                    }
                } else {
                    $("#errorInfo").text(result.errorInfo);
                }
            }, "json");

            // 记住用户和密码
            if (data.field.rememberMe) {
                $.cookie('user', data.field.username + '-' + data.field.password, {expires: 7});
                $.cookie('isRememberMe', 'true', {expires: 7});
            } else {
                $.cookie('user', '');
                $.cookie('isRememberMe', '');
            }
        });
    });
</script>
</body>
</html>